<template>
    <div class="dept-box">
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/loginRedirect' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>部门管理</el-breadcrumb-item>
            <el-breadcrumb-item>部门信息</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索 -->
        <el-input placeholder="请输入部门搜索" v-model="deptPage.deptName" clearable @clear="clearSearchData" @keyup.enter.native="searchDeptByname()" style="width:40%;margin-top:15px"></el-input>
        <el-button type="primary" @click="searchDeptByname()">查询</el-button>
        <el-button type="success" @click="addDeptDialog">新增</el-button>
        <!-- 数据表格 -->
        <el-table
            :data="DeptData"
            stripe
            style="width: 100%;margin-top:10px"
            :header-cell-style="{textAlign: 'center'}"
            :cell-style="{ textAlign: 'center' }">
            <el-table-column
                type="index"
                label="序号"
                width="450%">
            </el-table-column>
            <el-table-column
                prop="deptName"
                label="部门"
                width="550%">
            </el-table-column>
            <el-table-column
                label="操作"
                width="680%">
                <template slot-scope="scope">
                    <el-button size="small" type="success" @click="addDeptDialog">新增</el-button>
                    <el-button size="small" type="primary" @click="updateDeptDialog(scope.row)">修改</el-button>
                    <el-button size="small" type="danger" @click="deleteDept(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            style="margin-top:10px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="deptPage.page"
            :page-sizes="[7, 8, 9]"
            :page-size="deptPage.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totals">
        </el-pagination>
        <!-- 添加dialog -->
        <el-dialog
            title="添加部门"
            :visible.sync="addDeptDialogVisible"
            width="30%">
            <el-input placeholder="请输入新增部门" v-model="deptName"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancleAddDept()">取 消</el-button>
                <el-button type="primary" @click="addDept()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 修改dialog -->
        <el-dialog
            title="修改职位信息"
            :visible.sync="updateDeptDialogVisible"
            width="30%">
            <el-input placeholder="请输入修改部门" v-model="deptInfo.deptName"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancleUpdateJob()">取 消</el-button>
                <el-button type="primary" @click="updateJob()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            DeptData:[],
            deptPage:{
                page:1,
                size:8,
                deptName:''
            },
            totals:0,
            addDeptDialogVisible:false,
            updateDeptDialogVisible:false,
            deptName:'',
            deptInfo:{},
            ReqPrefix:"/deptInfo"
        }
    },
    created(){
        this.getDeptData();
    },
    methods:{
        // 获取部门信息
        getDeptData(){
            this.$http.post(`${this.ReqPrefix}/getDeptInfo`,this.deptPage).then((result)=>{
                // console.log(result);
                if(result.code === 200){
                    this.DeptData = result.data.deptList;
                    this.totals = result.data.totals - 0;
                }else{
                    this.$message.error("系统错误,请联系管理员!!!");
                }
            }).catch((err)=>{
                console.log(err);
                this.$message.error("系统错误,请联系管理员!!!");
            });
        },
        // 搜索
        searchDeptByname(){
            this.getDeptData();
        },
        // 分页
        handleSizeChange(val) {
            this.deptPage.size = val;
            this.getDeptData();s
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.deptPage.page = val;
            this.getDeptData();
            console.log(`当前页: ${val}`);
        },
        // 清楚搜索框
        clearSearchData(){
            this.getDeptData();
            this.$message.success("清除成功!!!");
        },
        // 新增
        addDeptDialog(){
            this.addDeptDialogVisible = true;
        },
        addDept(){
            if(this.deptName === ""){
                return this.$message.warning("职位名称不能为空!!!");
            }
            this.$http.post(`${this.ReqPrefix}/addDept`,"deptName="+this.deptName).then((res)=>{
                // console.log(res);
                if(res.data){
                    this.$message.success("添加成功!!!");
                    this.addDeptDialogVisible = false;
                    this.getDeptData();
                    this.deptName = "";
                }else{
                    this.$message.error("添加失败!!!");
                }
            }).catch((err)=>{
                this.$message.error("系统错误,请联系管理员!!!");
            })
        },
        // 取消添加
        cancleAddDept(){
            this.addDeptDialogVisible = false;
            this.deptName = "";
            this.$message.warning("已取消操作!!!");
        },
        // 删除
        deleteDept(row){
            this.$confirm('确定删除<<'+row.deptName+'>>部门? 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.get(`${this.ReqPrefix}/delDept/${row.deptId}`).then((res)=>{
                    if(res.code === 200 && res.data){
                        this.getDeptData();
                        this.$message.success("删除成功!!!");
                    }else{
                        this.$message.error("删除失败,请联系管理员!!!");
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 修改
        updateDeptDialog(row){
            this.deptInfo = row;
            this.updateDeptDialogVisible = true;
        },
        cancleUpdateJob(){
            this.getDeptData();
            this.updateDeptDialogVisible = false;
            this.$message.warning("已取消操作!!!");
        },
        updateJob(){
            this.$http.post(`${this.ReqPrefix}/updateDept`,this.deptInfo).then((res)=>{
                if(this.deptInfo.deptName === null || this.deptInfo.deptName === ''){
                    return this.$message.warning("部门名称不能为空!!!");
                }
                if(res.code === 200 && res.data){
                    this.updateDeptDialogVisible = false;
                    this.$message.success("修改成功!!!");
                    this.deptInfo = {};
                }else{
                    this.$message.error("修改失败,请联系管理员!!!");
                }
            }).catch((res)=>{
                this.$message.error("修改失败,请联系管理员!!!");
            });
        }
    }
}
</script>

<style>

</style>
